<template>
	<view class="allcasePage">
		<view class="tab" :style="{paddingTop: statusBarHeight + 'px'}">
			<view class="flex flex-between align-center tabbar">
				<image src="../../static/images/bb1_03.png" mode="" class="back" @click="back1"></image>
				<view class="">{{title}}</view>
				<view class="rightSide">
					<image src="../../static/images/bb1_05.png" mode="" class="maps" @click="openMap"></image>
					<image src="../../static/images/menu.png" mode="" class="slect" @click="selectBtn"></image>
				</view>
			</view>
			<view class="top-tab"></view>
		</view>
		<!-- 搜索 -->
		<view class="uni-form">
			<view class="uni-form-item uni-column">
				<input type="text" name="eventName" class="uni-input" v-model="data.eventName" placeholder="请输入查找案件名称"
					autocomplete="off" />
				<image @click="searchEvent" src='../../static/images/daban1_11.png' class="icon_close">
				</image>
			</view>
		</view>

		<view class="allCaseList">
			<view class="flex center" v-if="eventData.length==0">暂无数据</view>
			<view class="caseList" v-for="(item,index) in eventData" :key="index">
				<view class="oimage">
					<image v-if="item.smallImgData && item.smallImgData.length > 0" :src="img_item"
						v-for="(img_item, img_index) in item.smallImgData" :key="img_index"
						@click="seeImages(img_index, item.bigImgData)" mode="aspectFit">
					</image>
					<!-- <image src="../../static/images/daiban_09.png" mode=""></image> -->
				</view>
				<view class="case-right" @click="todetail(item)">
					<view class="flex case-top">
						<view class="right-rig">
							<view class="f18 color_45 f_hides" style="width: 145px;">{{item.eventTypeLv2Name}}</view>
							<view class="flex">
								<view class="bg2 bg" v-if="item.slowStatus>0">缓办</view>
								<view class="bg1 bg" v-if="item.delayStatus>0">延期</view>
								<view 
									class="bg3 bg"
									v-if="item.archivesTypeLeveThree &&(item.archivesTypeLeveThree.isJj==1 || item.archivesTypeLeveThree.isTf==1)">紧急</view>
								<view class="bg4 bg" v-if="item.shuntStatus>0">督办</view>
							</view>
						</view>
						<view class="returns">{{fliterNum(item.eventDealStatus)}}</view>
					</view>
					<view class="color_76 f_hide2">案件描述：{{item.eventDescribe}}</view>
					<view class="flex flex-between">
						<view class="color_76 f_hides" style="width: 200px;">案件地址：{{item.eventAddress}}</view>
						<image src="../../static/images/dw1_03.png" mode="" class="addres" @click.stop="mapLive(item)">
						</image>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出框搜索 -->
		<view class="taskBox" v-if="isShows">
			<view class="carial"></view>
			<view class="taskSearch">
				<view class="line flex">
					<view class="label-left mr20">距&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;离</view>
					<view class="flex">
						<label class="mr10 f12">
							<radio value="0" class="radios" :checked="sub==0" @click="chang('sub',0)" />50m
						</label>
						<label class="mr10 f12">
							<radio value="1" class="radios" :checked="sub==1" @click="chang('sub',1)" />100m
						</label>
						<label class="mr10 f12">
							<radio value="2" class="radios" :checked="sub==2" @click="chang('sub',2)" />150m
						</label>
					</view>
				</view>
				<view class="line flex">
					<view class="label-left mr20">是否督办</view>
					<view class="flex">
						<label class="mr20">
							<radio value="0" class="radios" :checked="sub0==0" @click="chang('sub0',0)" />是
						</label>
						<label class="mr20">
							<radio value="1" class="radios" :checked="sub0==1" @click="chang('sub0',1)" />否
						</label>
					</view>
				</view>
				<view class="line flex">
					<view class="label-left mr20">是否超时</view>
					<view class="flex">
						<label class="mr20">
							<radio value="0" class="radios" :checked="sub1==0" @click="chang('sub1',0)" />是
						</label>
						<label class="mr20">
							<radio value="1" class="radios" :checked="sub1==1" @click="chang('sub1',1)" />否
						</label>
					</view>
				</view>
				<view class="line flex">
					<view class="label-left mr20">是否突发</view>
					<view class="flex">
						<label class="mr20">
							<radio value="0" class="radios" :checked="sub2==0" @click="chang('sub2',0)" />是
						</label>
						<label class="mr20">
							<radio value="1" class="radios" :checked="sub2==1" @click="chang('sub2',1)" />否
						</label>
					</view>
				</view>
				<view class="line flex">
					<view class="label-left mr20">是否紧急</view>
					<view class="flex">
						<label class="mr20">
							<radio value="0" class="radios" :checked="sub3==0" @click="chang('sub3',0)" />是
						</label>
						<label class="mr20">
							<radio value="1" class="radios" :checked="sub3==1" @click="chang('sub3',1)" />否
						</label>
					</view>
				</view>
			</view>
			<view class="flex tewoBtn flex-around">
				<view class="reset" @click="reset">重置</view>
				<view class="reset" @click="canal">确定</view>
			</view>
		</view>
		<!-- 底部导航栏 -->
		<view class="bottom-bar flex flex-around boxShow">
			<view class="botm-item" @click="openPageHome(0)">
				<image src="../../static/images/home_54.png" mode="" class="img-small"></image>
				<view>首页</view>
			</view>
			<view class="botm-item" @click="openPageHome(1)">
				<image src="../../static/images/home_51.png" mode="" class="img-center"></image>
			</view>
			<view class="botm-item" @click="openPageHome(2)">
				<image src="../../static/images/home_57.png" mode="" class="img-small"></image>
				<view>我的</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		geteventlist
	} from '../../util/api.js'
	import filters from '../../common/getTimeqj.js'
	import URL from '../../util/url.js'
	export default {
		data() {
			return {
				sub: 0,
				sub0: 0,
				sub1: 0,
				sub2: 0,
				sub3: 0,
				imgUrl: URL.IMAGEURL1,
				isShows: false,
				userInfor: uni.getStorageSync('userInfor'),
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				title: '',
				data: {
					pageSize: 5,
					pageNum: 1,
					createUser: '',
					eventDealStatus: [],
					eventName: '', //案件名称
					length: '',
					gdx: '108.938228',
					gdy: '34.230579',
					dealLimitTime: '', //是否超時
					isTf: '',
					isJj: '',

				},
				eventData: [],
				total: 0,
				status: 'loading',
			}
		},
		onLoad(e) {
			let _this = this;
			
			this.userInfor = uni.getStorageSync('userInfor');
			this.data.createUser = uni.getStorageSync('userInfor').userId;
			this.data.eventDealStatus = JSON.parse(e.allCode);
			this.title = e.type;
			this.getMycasehanding();
			// #ifdef APP-PLUS
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					_this.data.gdy = res.latitude;
					_this.data.gdx = res.longitude;
				}
			})
			// #endif
		},
		methods: {
			fliterNum(e) {
				var msg;
				switch (e) {
					case '0101':
						msg = '待核实';
						break
					case '0102':
						msg = '待核实';
						break
					case '0103':
						msg = '待转办';
						break
					case '0104':
						msg = '已回退';
						break
					case '0201':
						msg = '派遣中';
						break
					case '0202':
						msg = '待处置';
						break
					case '0203':
						msg = '待回转';
						break
					case '0205':
						msg = '待审核';
						break
					case '0206':
						msg = '待核查';
						break
					case '0207':
						msg = '待核查';
						break
					case '0208':
						msg = '待结案';
						break
					case '0209':
						msg = '结案';
						break
					case '0001':
						msg = '销案';
						break
					case '0002':
						msg = '销案';
						break
				}
				return msg;
			},
			chang(name, e) {
				this[name] = e;
			},
			//打开小图标地图
			openMap() {
				uni.navigateTo({
					url: '/pages/map/allmarkMap?eventDealStatus=' + this.data.eventDealStatus + "&type=" + 1,
				})
			},
			mapLive(e) {
				uni.navigateTo({
					url: '/pages/map/allmarkMap?eventDealStatus=' + this.data.eventDealStatus + "&type=" + 2 +
						"&eventId=" + e.eventId,
				})
			},
			openPageHome(e) {
				if (e == 0) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else if (e == 1) {
					uni.navigateTo({
						url: '/pages/reporting/reporting'
					})
				} else if (e == 2) {
					uni.switchTab({
						url: '/pages/my/my'
					})
				}
			},
			//案件列表查看大图
			seeImages(index, bigImgData) {
				let _this = this;
				uni.previewImage({
					urls: bigImgData,
					current: index,
				});
			},
			todetail(eventItem) {
				//如果是监理待审核跳转至处置结果页面  待审核0205
				var pageType = 1;
				if (eventItem.eventDealStatus == '0205') {
					uni.navigateTo({
						url: '../disposalResults/disposalResults?eventItem=' + JSON.stringify(eventItem)
					})
				} else {
					// uni.navigateTo({
					// 	url:'../detailPage/detailPage?eventItem='+ JSON.stringify(eventItem)+'&pageType='+pageType,
					// })
					uni.navigateTo({
						url: '../detailPage/detailPage?eventItem=' + eventItem.eventId + '&pageType=' + pageType,
					})
				}
			},
			back1() {
				uni.navigateBack({
					delta: 1
				})
			},
			onReachBottom() {
				if (this.data.pageSize * this.data.pageNum >= this.total) {
					this.status = 'noMore';
					return;
				} else {
					this.data.pageNum = this.data.pageNum + 1;
					this.status = 'loading';
				}

				setTimeout(() => {
					this.getMycasehanding();
				}, 300);
			},
			onPullDownRefresh() {
				this.resetParam();
				this.status = 'loading';
				this.getMycasehanding();
			},
			resetParam() {
				this.data.pageSize = 5;
				this.data.pageNum = 1;
				this.total = 20;
				this.eventData = [];
			},
			getMycasehanding() {
				let options;
				uni.showLoading();
				geteventlist(this.data).then((res) => {
					uni.hideLoading()
					if (res.code == 200) {
						let eventData = res.rows;
						eventData.forEach((ele, index) => {
							ele.smallImgData = [];
							ele.bigImgData = [];
							let images = [];
							if (ele.beforeImg) {
								images = JSON.parse(ele.beforeImg);
								for (var i = 0; i < images.length; i++) {
									ele.smallImgData.push(this.imgUrl + images[i].path);
									ele.bigImgData.push(this.imgUrl + images[i].path);
								}
							}
						})
						this.eventData = [...this.eventData, ...eventData];
						this.total = res.total;
						if (this.data.pageSize * this.data.pageNum >= this.total) {
							this.status = 'noMore';
						} else {
							this.status = 'more';
						}
					} else {
						this.$toast.showToast(res.msg)
					}
					uni.stopPullDownRefresh();
				}).catch((err) => {
					uni.stopPullDownRefresh();
				})
			},
			searchEvent() {
				this.data.length = '';
				this.data.dealLimitTime = '';
				this.data.isTf = '';
				this.data.isJj = '';
				this.resetParam()
				this.getMycasehanding()
			},
			selectBtn() {
				this.isShows = !this.isShows
			},
			canal() {
				// length:'',
				// gdx:'34.230579',
				// gdy:'108.938228',
				// dealLimitTime:'', //是否超時
				// archivesTypeLeveThree:{
				// 	isTf:'',
				// 	isJj:'',
				// }
				this.data.length = this.sub == 0 ? 50 : this.sub == 1 ? 100 : 150;
				this.data.dealLimitTime = this.sub1
				this.data.isTf = this.sub2
				this.data.isJj = this.sub3
				this.isShows = false
				this.resetParam()
				this.getMycasehanding()
			},
			reset() {
				this.sub = 0;
				this.sub0 = 0;
				this.sub1 = 0;
				this.sub2 = 0;
				this.sub3 = 0;
			}
		}
	}
</script>

<style scoped lang="scss">
	.line {
		margin-bottom: 5px;
	}

	.taskBox {
		position: absolute;
		width: 500rpx;
		height: 380rpx;
		top: 150rpx;
		right: 20rpx;
		padding: 40rpx 20rpx;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99999;
		border-radius: 10rpx;
		color: #FFFFFF;

		.carial {
			width: 0;
			height: 0;
			border-right: 10rpx solid transparent;
			border-left: 10rpx solid transparent;
			border-top: 10rpx solid transparent;
			border-bottom: 10rpx solid rgba(0, 0, 0, 0.5);
			position: absolute;
			right: 20rpx;
			top: -20rpx;
		}

		.tewoBtn {
			margin-top: 20rpx;

			.reset {
				width: 146rpx;
				height: 46rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #4C8DEF;
				border-radius: 10rpx;
				font-size: 14px;
			}
		}
	}

	.addres {
		width: 31rpx;
		height: 34rpx;
	}

	.top-tab {
		height: 60rpx;
		background: #4188F2;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		right: 0rpx;
		margin-top: 0px;
		/* #ifdef H5 */
		margin-top: 44px;
		/* #endif */
		/* #ifdef APP-PLUS */
		top: 70px;
		/* #endif */
	}

	.allCaseList {

		/* #ifdef H5 */
		padding: 220rpx 0 20rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		padding: 290rpx 0 20rpx;
		/* #endif */
		padding-bottom: 150rpx;

		.caseList {
			margin: 0 44rpx;
			box-shadow: #b5cede 0px 0px 10px;
			background: white;
			border-radius: 20rpx;
			padding: 20rpx;
			height: 250rpx;
			display: flex;
			margin-bottom: 30rpx;

			.oimage {
				width: 190rpx;
				height: 190rpx;
				border: 1px solid #C0C0C0;
				margin-right: 20rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					z-index: 0;

				}
			}

			.case-right {
				flex: 1;

				.case-top {
					justify-content: space-between;
					flex: 1;

					.returns {
						background-color: $qj-color;
						height: 40rpx;
						line-height: 40rpx;
						color: #FFFFFF;
						padding: 0rpx 20rpx;
						border-radius: 30rpx 20rpx 20rpx 0rpx;
					}
				}
			}
		}
	}

	.uni-form {
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		z-index: 9;
		background: white;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: #b5cede 0px 0px 10px;
		margin: 0rpx 40rpx 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifdef APP-PLUS */
		top: 78px;

		/* #endif */
		.uni-form-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			border: 1px solid #397ADA;
			border-radius: 10rpx;
			padding: 0;

			.uni-input {
				flex: 1;
				height: 60rpx;
				border-radius: 10rpx;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
		}
	}

	.img-small {
		width: 52rpx;
		height: 52rpx;
	}

	.img-center {
		width: 115rpx;
		height: 115rpx;
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		padding: 20rpx 20rpx 10rpx 20rpx;
	}
</style>
